<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p>
      <button @click="cur = 'CounterView'">counter</button>
      <button @click="cur = 'HelloSomeone'">hello</button>
    </p>
    <transition name="skew">
      <keep-alive include="CounterView">
        <component :is="cur"></component>
      </keep-alive>
    </transition>
  </div>
</template>

<script>
import HelloSomeone from "../components/HelloSomeone.vue";
import CounterView from "../components/CounterView.vue";

export default {
  name: "AboutView",
  data() {
    return {
      cur: "CounterView",
    };
  },
  components: {
    CounterView,
    HelloSomeone,
  },
};
</script>

<style lang="scss">
.skew-enter-active,
.skew-leave-active {
  transition: transform 1s;
}
.skew-enter, .skew-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform: skew(45deg, 60deg);
}
</style>